
<script>
import { TableColumn, Tooltip } from 'element-ui'
import _ from 'lodash'
import normalizeTypeCellVNode from './normalizeTypeCellVNode'
/**
 * 函数式组件，根据配置返回 Array<TableColumn>
 * TableColumn 参考{@link https://element.eleme.cn/#/zh-CN/component/table}
 * @displayName RenderColumns
 */
export default {
  functional: true,
  components: {
    TableColumn
  },
  props: {
    columnConfigs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  render(h, ctx) {
    const { props } = ctx
    const { columnConfigs } = props
    let columns = []
    /**
     * @prop {Object} config 列的配置。
     * 通过解析列配置生成虚拟节点VNode。
     * 表头存在层级关系，在这里递归调用
     */
    const createColumnVNode = (config) => {
      let childrenColumnsVnode = []
      if (config.child && config.child.length) {
        childrenColumnsVnode = config.child.map((childConfig) =>
          createColumnVNode(childConfig)
        )
      }
      const {
        name,
        key,
        msg,
        width,
        renderHeader,
        renderContent,
        sortable,
        overflow,
        ...otherColumnConfig
      } = config

      return (
        <TableColumn
          align="center"
          minWidth={width || 85}
          width={width || ''}
          {...{ props: { ...otherColumnConfig } }}
          key={key}
          prop={key}
          label={name}
          sortable={sortable}
          show-overflow-tooltip={overflow}
          scopedSlots={{
            // 根据配置生成个性化表头
            // 如果不存在msg，则生成文本
            // 存在msg,生成Popover 。
            // 如果config中存在 renderHeader方法，则交给上层组件，进行自定义设置
            header(scope) {
              let headerVNode = <span>{name}</span>

              if (msg) {
                headerVNode = (
                  <Tooltip popper-class="e_tips_box" effect="dark">
                    <div
                      slot="content"
                      directives={[{ name: 'html', value: msg }]}
                    >
                      {msg}
                    </div>
                    <div>
                      {' '}
                      {name}
                      <i style="color:red">*</i>
                    </div>
                  </Tooltip>
                )
              }
              if (_.isFunction(renderHeader)) {
                try {
                  headerVNode = renderHeader(h, scope, headerVNode)
                } catch (e) {
                  console.error(
                    `RenderColumns Components : 自定义表格头部renderHeader报错`,
                    e
                  )
                }
              }
              return headerVNode
            },
            // 根据配置生成表格内容
            // 如果存在renderContent,则调用renderContent方法,交给上层组件自定义配置
            default(scope) {
              // TODO:数据库中可以预设字段的类型,通过类型，这里可以预先处理好contentVNode
              let contentVNode = normalizeTypeCellVNode(h, config, scope)
              if (_.isFunction(renderContent)) {
                try {
                  contentVNode = renderContent(h, scope, contentVNode)
                } catch (e) {
                  console.error(
                    `RenderColumns Components:自定义表格内容方法renderContent报错 `,
                    e
                  )
                }
              }
              return contentVNode
            }
          }}
        >
          {childrenColumnsVnode}
        </TableColumn>
      )
    }
    columns = columnConfigs.map((config) => createColumnVNode(config))
    return columns
  }
}
</script>
